<template>
  <view class="login-page">
    <view class="login-wrapper">
      <view class="top">
        <view class="left">
          <view class="t1">欢迎登录</view>
          <view class="t2">你好，欢迎登录马上交付~</view>
        </view>
        <image class="logo" src="/static/icon/logo.png"></image>
      </view>
      <view class="form">
        <view class="item">
          <view class="label">手机号</view>
          <view class="value">
            <input v-model="payload.phone" type="number" placeholder="请输入手机号~">
          </view>
        </view>
        <view class="item">
          <view class="label">验证码</view>
          <view class="value">
            <input v-model="payload.code" type="number" placeholder="请输入验证码~">
            <view class="verify" @click="getVerify">
              {{time === 0 ? '获取验证码' : `重新获取(${time})`}}
            </view>
          </view>
        </view>
      </view>
      <view class="submit-btn" @click="submit">立即登录</view>
      <view class="protol-box">
        <radio color="#1F649F" :checked="checked" @click="checked = !checked" style="transform: scale(0.7);"></radio>
        <text @click="checked = !checked">我已阅读并同意马上交付</text>
        <navigator class="url" url="/subpages/protol/protol?type=1">《用户协议》</navigator>
        <text @click="checked = !checked">和</text>
        <navigator class="url" url="/subpages/protol/protol?type=2">《隐私政策》</navigator>
      </view>
    </view>
  </view>
</template>

<script>
  import { phone } from '@/utils/regexp/';
  import { LoginApi, SendSmsApi } from '@/api/';
  const app = getApp();
  
  export default {
    data() {
      return {
        payload: {
          phone: '',
          code: '',
        },
        time: 0,
        timer: null,
        checked: false,
      };
    },
    onUnload() {
      this.clear()
    },
    methods: {
      clear() {
        if (this.timer) {
          clearInterval(this.timer)
        }
      },
      getVerify() {
        if (this.time === 0) {
          if (this.payload.phone === '') {
            uni.showToast({
              icon: 'none',
              title: '请输入手机号'
            })
            return
          }
          if (!phone.test(this.payload.phone)) {
            uni.showToast({
              icon: 'none',
              title: '请输入正确的手机号'
            })
            return
          }
          SendSmsApi({ phone: this.payload.phone }).then(() => {
            uni.showToast({
              icon: 'none',
              title: '验证码发送成功'
            })
            this.time = 60
            this.timer = setInterval(() => {
              if (this.time === 1) {
                this.time = 0
                this.clear()
              } else {
                this.time --
              }
            }, 1000)
          })
        }
      },
      submit() {
        if (this.payload.phone === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入手机号'
          })
          return
        }
        if (!phone.test(this.payload.phone)) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的手机号'
          })
          return
        }
        if (this.payload.code === '') {
          uni.showToast({
            icon: 'none',
            title: '请输入验证码'
          })
          return
        }
        if (!this.checked) {
          uni.showToast({
            icon: 'none',
            title: '请先阅读并勾选相关协议'
          })
          return
        }
        LoginApi(this.payload).then((res) => {
          uni.setStorageSync('token', res.data)
          app.getUserInfo(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          })
        }).catch(() => {})
      }
    }
  }
</script>

<style lang="scss">
.login-page {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #fffef9 0%, #f3feff 50%, #fffafa 100%);
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  @include flex;
  .login-wrapper {
    width: 630rpx;
    overflow: hidden;
    .top {
      @include flex;
      margin-bottom: 50rpx;
      .left {
        flex: 1;
        overflow: hidden;
        line-height: 1.2;
        .t1 {
          font-size: 48rpx;
          color: #1D1C1A;
          font-weight: bold;
          margin-bottom: 12rpx;
        }
        .t2 {
          font-size: 26rpx;
          color: #666666;
        }
      }
      .logo {
        width: 291rpx;
        height: 144rpx;
      }
    }
    .form {
      background: #1F649F;
      border-radius: 10rpx;
      padding: 54rpx 42rpx 32rpx;
      box-sizing: border-box;
      margin-bottom: 80rpx;
      .item {
        margin-bottom: 40rpx;
        .label {
          font-size: 28rpx;
          color: #FFFFFF;
          line-height: 1.2;
          margin-bottom: 16rpx;
        }
        .value {
          width: 100%;
          @include flex;
          input {
            flex: 1;
            overflow: hidden;
            background: #FFFFFF;
            border-radius: 10rpx;
            height: 88rpx;
            font-size: 30rpx;
            color: #333;
            box-sizing: border-box;
            padding: 0 32rpx;
          }
          .verify {
            width: 220rpx;
            height: 88rpx;
            background: #EDAA50;
            border-radius: 10rpx;
            @include flex;
            font-size: 30rpx;
            color: #fff;
            margin-left: 20rpx;
          }
        }
      }
    }
    .submit-btn {
      width: 100%;
      height: 88rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      border: 1px solid #1F649F;
      box-sizing: border-box;
      @include flex;
      color: $uni-color-primary;
      font-size: 32rpx;
      font-weight: bold;
    }
    .protol-box {
      line-height: 78rpx;
      @include flex;
      font-size: 24rpx;
      color: #1F1E1A;
      .url {
        color: $uni-color-primary;
      }
    }
  }
}
</style>
